<template>
  <div class="container">
    <el-dialog
      title="修改购货单"
      :visible.sync="compileDialog.centerDialogVisible"
      width="800px"
      center
      :lock-scroll="true"
      append-to-body
      @open="getData"
    >
      <div class="top">
        <el-select
          size="small"
          v-model="outer.value"
          :multiple="false"
          filterable
          remote
          reserve-keyword
          placeholder="请输入商品"
          :remote-method="remoteMethod"
          :loading="outer.loading"
        >
          <el-option
            v-for="item in outer.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          class="add"
          size="small"
          type="primary"
          icon="el-icon-circle-plus"
          @click="addShopping"
        >添加商品</el-button>
      </div>
      <el-table :data="formData" border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="name" label="商品" align="center"></el-table-column>
        <el-table-column prop="code" label="编号" align="center"></el-table-column>
        <el-table-column label="数量" align="center" width="180">
          <template slot-scope="scope">
            <el-input-number size="small" :controls="false" v-model="scope.row.sum1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" width="180">
          <template slot-scope="scope">
            <el-input-number size="small" :controls="false" v-model="scope.row.sum2"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleEdit(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { supplierList } from "@/api/supplier/supplierList";
import { commodityList } from "@/api/commodity/commodityList";
import { addShopping, particulars, upData } from "@/api/shopping/shoppingList";
export default {
  props: {
    compileDialog: Object
  },
  data() {
    return {
      formData: [],
      rules: {
        num1: [{ required: true, message: "填写角色名称", trigger: "blur" }],
        num2: [{ required: true, message: "填写描述", trigger: "blur" }]
      },
      commodityList: [],

      outer: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      inside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
        id: "",
        buy_order_id: ""
      }
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    //获取修改数据
    getData() {
      this.formData = [];
      let data = {
        buy_order_id: this.compileDialog.id
      };
      particulars(data).then(data => {
        if (data.code == 0) {
          data.data.buy_order_goods_info.forEach(res => {
            this.formData.push({
              id: res.id,
              good_id: res.good_id,
              erp_id: res.good_erp_id,
              name: res.name,
              code: res.good_code,
               unit: res.unit,
            markup: res.markup,
              sum1: res.count,
              sum2: res.price
            });
          });
          this.inside.id = data.data.buy_order_info.supplier_id;
          this.inside.value = data.data.buy_order_info.supplier.name;
          this.inside.buy_order_id = data.data.buy_order_info.id;
          this.getDatas()
        }
      });
    },
     // 获取初始商品列表
    getDatas() {
      let data = {
        page: 1,
        limit: 50,
        supplier_id: this.inside.id
      };
      commodityList(data).then(res => {
        this.outer.options = res.data.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.commodityList = res.data.data;
      });
    },
    //获取商品列表
    getCommodityList(query) {
      let data = {
        search: query,
        page: 1,
        limit: 100,
        supplier_id: this.inside.id
      };
      this.outer.loading = true;
      commodityList(data).then(res => {
        this.outer.list = res.data.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.outer.loading = false;
        this.outer.options = this.outer.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        this.commodityList = res.data.data;
      });
    },
    // 删除
    handleEdit(scope) {
      let code = scope.row.code;
      this.formData.forEach((res, index) => {
        if (res.code == code) {
          this.formData.splice(index, 1);
        }
      });
    },
    //提交
    confirm() {
      if (this.formData.length > 0) {
        let formDataList = [];
        this.formData.forEach(res => {
          formDataList.push({
            good_id: res.good_id ? res.good_id : res.id,
            good_erp_id: res.erp_id,
            good_code: res.code,
            name: res.name,
            price: res.sum2,
            count: res.sum1,
            unit: res.unit,
            markup: res.markup
          });
        });
        let data = {
          supplier_id: this.inside.id,
          goods_data: JSON.stringify(formDataList),
          buy_order_id: this.inside.buy_order_id
        };
        upData(data)
          .then(res => {
            if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.hideDialog();
              this.$emit("upData");
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
            this.hideDialog();
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请添加商品",
          type: "info"
        });
      }
    },

    //添加商品
    addShopping() {
      if (this.outer.value == "") {
        this.$message({
          message: "请选择商品",
          type: "info"
        });
      } else {
        let bool = this.formData.some(res => {
          return res.code == this.outer.value;
        });
        if (bool) {
          this.$message({
            message: "已添加该商品",
            type: "info"
          });
        } else {
          let commodity = this.commodityList.filter(res => {
            return res.code == this.outer.value;
          });
          commodity[0].sum1 = 1;
          commodity[0].sum2 = 1;
          this.formData.push(commodity[0]);
        }
      }
    },
    //搜索商品数据
    remoteMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.outer.options = [];
      }
    },
    //取消
    cancel() {
      this.hideDialog();
    },
    //取消方法
    hideDialog() {
      this.compileDialog.centerDialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  height: 40px;
}
.main {
  display: flex;
  justify-content: center;
}
</style>